import React from 'react';

import './static/css/login.css';
import $ from 'jquery';

import {browserHistory} from 'react-router';

class Register2 extends React.Component{
    constructor(props){
        super(props);
    }
     componentDidMount(){
       function getRadomCode() {
        var str = "";
        for (var i = 0; i < 4; i++) {
            var rnum = parseInt(Math.random() * 10);
            str += rnum;
        }
        return str;
    }
    var isgetCode = false;
    $(".getcode").click(function () {
        isgetCode = true;
        $(this).attr("disabled", "disabled")
        $(this).html(60);
        $(".submitBtn").removeAttr("disabled");
        $(".showcode").html(getRadomCode());
        var timeid = setInterval(function () {
            var time = $(this).html() * 1;
            time--;
            $(this).html(time);
            if (time == 0) {
                clearInterval(timeid);
                $(this).html("获取验证码");
                $(this).removeAttr("disabled");
                isgetCode = false;
            }
        }.bind(this), 1000)
    })
    
     function showDialog(str){
        $(".alertbox").html(str)
            $(".alertbox").css("opacity","1");
            var width = parseInt($(".alertbox").css("width"))/2;
            $(".alertbox").css("margin-left",-width);
            $(".alertbox").stop().animate({ 
                opacity: 0  
            }, 3000) 
    }

    $(".submitBtn").click(function () {
        if (!isgetCode) {
            showDialog("请获取验证码！");
        } else if ($(".showcode").html() != ($(".code").val())) {
             showDialog("验证码错误！");
        } else {

            browserHistory.push('Register3');
        }
    })

    }
    render(){
        return(
            <div className="register2">
                <header className="header7">
                    <a href=""><i className="iconfont">&#xe607;</i></a> 注册
                </header>
                <p className="tip">点击获取验证码，输入正确的验证码，点击下一步继续注册</p>
                <p className="showcode">&nbsp;</p>
                <div className="formbox codebox">
                    <input className="code" type="" placeholder="验证码" maxlength="4"/>
                    <button className="getcode">获取验证码</button>
                </div>

                <button className="submitBtn" >下一步</button>
                <div className="alertbox"></div>
            </div>
        )
    }
}

export default Register2;